<template>
  <div class="designer-tabs">
    <div
      v-for="(tab, index) in tabs"
      :key="index"
      class="designer-tab-item"
      :class="{ active: activeTab === tab.name }"
      @click="changeTab(tab.name)"
    >
      <div class="tab-icon">
        <i :class="tab.icon"></i>
      </div>
      <div class="tab-label">{{ tab.label }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  activeTab: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['update:activeTab']);

const tabs = [
  { name: 'add', label: '添加', icon: 'el-icon-plus' },
  { name: 'template', label: '海报', icon: 'el-icon-picture' },
  { name: 'layers', label: '图层', icon: 'el-icon-menu' },
  { name: 'text', label: '文字', icon: 'el-icon-notebook-1' },
  { name: 'commerce', label: '电商', icon: 'el-icon-shopping-cart-1' }
];

const changeTab = (tabName) => {
  emit('update:activeTab', tabName);
};
</script>

<style scoped>
.designer-tabs {
  display: flex;
  flex-direction: column;
  width: 70px;
  height: 100%;
  background-color: #f5f7fa;
  border-right: 1px solid #e0e0e0;
}

.designer-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70px;
  cursor: pointer;
  transition: all 0.3s;
  color: #606266;
}

.designer-tab-item:hover {
  background-color: #e6f1fc;
  color: #409EFF;
}

.designer-tab-item.active {
  background-color: #ecf5ff;
  color: #409EFF;
  border-left: 3px solid #409EFF;
}

.tab-icon {
  font-size: 22px;
  margin-bottom: 5px;
}

.tab-label {
  font-size: 12px;
}
</style>